<script setup lang="ts">
import type {
  OnActionClickParams,
  VxeTableGridOptions,
} from '#/adapter/vxe-table';
import type { SystemApi } from '#/api/system/system';

import { Page, useVbenDrawer } from '@vben/common-ui';
import { Plus } from '@vben/icons';

import { ElButton, ElMessage, ElMessageBox } from 'element-plus';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { deleteSystem, getSystemList } from '#/api/system/system';
import { EditInfo } from '#/components/edit-info/index';
import { $t } from '#/locales';
import ApiManager from '#/views/system/api/index.vue';
import MenuManager from '#/views/system/menu/index.vue';
import { SystemInfo } from '#/views/system/system/components/system-info/index';
import { useGridColumns, useGridFormSchema } from '#/views/system/system/data';

import Form from './components/form.vue';

/** 刷新表格 */
function onRefresh() {
  gridApi.query();
}

function onEdit(row: SystemApi.System) {
  formDrawerApi.setData(row).open();
}

function onCreate() {
  formDrawerApi.setData(null).open();
}

/** 删除角色 */
async function onDelete(row: SystemApi.System) {
  await ElMessageBox.confirm('确定要删除该系统吗？', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  });
  await deleteSystem(row.id as number);
  ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
  onRefresh();
}

const [FormDrawer, formDrawerApi] = useVbenDrawer({
  connectedComponent: Form,
  destroyOnClose: true,
});

const [ApiManagerDrawer, apiManagerDrawerApi] = useVbenDrawer({
  connectedComponent: ApiManager,
  appendToMain: true,
  destroyOnClose: true,
});

const [MenuManagerDrawer, menuManagerDrawerApi] = useVbenDrawer({
  connectedComponent: MenuManager,
  appendToMain: true,
  destroyOnClose: true,
});

function onOpenApiManager(row: SystemApi.System) {
  apiManagerDrawerApi.setData(row).open();
}

function onOpenPermissionManager(row: SystemApi.System) {
  menuManagerDrawerApi.setData(row).open();
}

function onActionClick({ code, row }: OnActionClickParams<SystemApi.System>) {
  switch (code) {
    case 'delete': {
      onDelete(row);
      break;
    }
    case 'edit': {
      onEdit(row);
      break;
    }
    case 'open-api-manager': {
      onOpenApiManager(row);
      break;
    }
    case 'open-permission-manager': {
      onOpenPermissionManager(row);
      break;
    }
  }
}

const [Grid, gridApi] = useVbenVxeGrid({
  formOptions: {
    schema: useGridFormSchema(),
  },
  gridOptions: {
    columns: useGridColumns(onActionClick),
    height: 'auto',
    proxyConfig: {
      ajax: {
        query: async ({ page }, formValues) => {
          return await getSystemList({
            pageNum: page.currentPage,
            pageSize: page.pageSize,
            ...formValues,
          });
        },
      },
    },
  } as VxeTableGridOptions<SystemApi.System>,
});
</script>

<template>
  <Page auto-content-height>
    <FormDrawer @success="onRefresh" />
    <ApiManagerDrawer />
    <MenuManagerDrawer />
    <Grid table-title="平台列表">
      <template #system-info="{ row }">
        <SystemInfo :data="row" />
      </template>
      <template #edit-info="{ row }">
        <EditInfo :handler-name="row.handlerName" :time="row.updateTime" />
      </template>
      <template #toolbar-tools>
        <ElButton
          type="primary"
          @click="onCreate"
          v-access:code="['system:system:add']"
        >
          <Plus class="mr-2 size-5" />
          {{ $t('ui.system.create') }}
        </ElButton>
      </template>
    </Grid>
  </Page>
</template>
